<template>
  <div class="mdui-container">
    <br>
    <h2>商品添加</h2>
    <div class="mdui-textfield">
      <label class="mdui-textfield-label">商品名称</label>
      <input class="mdui-textfield-input" type="text" v-model="name"/>
    </div>
    <div class="mdui-textfield">
      <label class="mdui-textfield-label">商品封面</label>
      <br>
      <img :src="this.image_url" width="100px" height="100px" onclick="document.getElementById('imgup').click()">
      <input id="imgup" type="file" @change="up" accept="image/*" name="imgUrls" value="file1" style="visibility: hidden">
    </div>

      <label class="mdui-textfield-label">商品分类</label>
    <br>
      <select @change="selet($event)" class="mdui-select" mdui-select >
        <option   v-for="(item) in sort_list" :value="item.分类id" >{{item.分类名称}}</option>
      </select>

    <br>
    <div class="mdui-textfield">
      <label class="mdui-textfield-label">商品介绍</label>
      <input class="mdui-textfield-input" type="text" v-model="details"/>
    </div>
    <div class="mdui-textfield">
      <label class="mdui-textfield-label">商品价格</label>
      <input class="mdui-textfield-input" type="text" v-model="price"/>
    </div>
    <div class="mdui-textfield">
      <label class="mdui-textfield-label">商品库存</label>
      <input class="mdui-textfield-input" type="text" v-model="number"/>
    </div>

    <div class="mdui-textfield">
      <label class="mdui-textfield-label">展示权重(默认100)</label>
      <input class="mdui-textfield-input" type="text" v-model="weight"/>
    </div>
    <br>
    <br>
    <button class="mdui-btn mdui-float-right" v-on:click="add">添加</button>
    <div style="height: 100px"></div>
    <div class="mdui-dialog" id="commodity_add_dialog">
      <div class="mdui-dialog-title">图片上传</div>
      <div class="mdui-dialog-content">
        {{press}}
      </div>
    </div>

  </div>

</template>

<script>
  import * as mdui from "mdui";
  import axios from "axios";
  import qs from "qs";
  import jm from "./../../static/jm"
  import sort_list from "./sort_list";

  const BASE_URL = 'http://127.0.0.1:8886';
  export default {
    name: 'login',
    data () {
      return {
        phone_number: '',
        password: '',
        name:'',
        weight:'',
        sort_id:'',
        image_url:'static/add2.jpg',
        cover:'',
        press:'0%',
        inst:'',
        details:'',
        price:'',
        number:'',
        sort_id:'',
        sort_list:[]

      }
    },
    methods:{

      selet(e){
        this.sort_id=e.target.value;
      },
      get_sort_list()
      {
        axios.post(BASE_URL +'/sort/get_sort',
          qs.stringify({fff:111}),
          {'headers': {'Content-Type': 'application/x-www-form-urlencoded'}})
          .then(re => {
            if(re.data.状态码===200)
            {


              this.sort_list=re.data.列表;
              this.sort_id=re.data.列表[0].分类id;

            }
            else
            {
              mdui.default.alert(re.data.备注);
            }
          })
          .catch(err=>{
            mdui.default.alert("网络错误");

          });



      },
      up(i){
        this.inst.open();
        let file = i.path[0].files[0];

        let ff = new FormData();
        ff.append("uploadedfile",file);
        this.token=window.localStorage.getItem("token");
        this.press='0%';

        axios.post(BASE_URL+'/images/up',ff,
          {'headers': {'Content-Type': 'multipart/form-data'},
            onUploadProgress: progressEvent => {
          this.press = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%';
              if((progressEvent.loaded / progressEvent.total * 100 | 0) ==100)
                this.image_url='static/loading.jpg';

        }})
          .then(re => {
            this.inst.close();


            this.image_url=re.data.small;
            this.cover=re.data.id;
          })
          .catch(err=>{
            this.inst.close();
            mdui.default.alert("网络错误");

          });




      },
      add(){
        if(!this.name)
        {
          mdui.default.alert("请输入名称");
          return;
        }
        if(!this.cover)
        {
          mdui.default.alert("请上传封面");
          return;
        }
        if(!this.details)
        {
          mdui.default.alert("请输入介绍");
          return;
        }
        if(!this.weight)
        {
          mdui.default.alert("请输入权重");
          return;
        }
        if(!this.price)
        {
          mdui.default.alert("请输入价格");
          return;
        }
        if(!this.number)
        {
          mdui.default.alert("请输入库存");
          return;
        }
        if(!this.weight)
        {
          mdui.default.alert("请输入权重");
          return;
        }

        this.token=window.localStorage.getItem("token");
        axios.post(BASE_URL +'/commodity/add_commodity',
          qs.stringify({token:this.token,name:this.name,weight:this.weight,details:this.details,price:this.price,number: this.number,sort_id:this.sort_id,cover:this.cover}),
          {'headers': {'Content-Type': 'application/x-www-form-urlencoded'}})
          .then(re => {
            if(re.data.状态码===200)
            {
              mdui.default.alert("商品添加成功");
              this.name='';
              this.details='';
              this.cover='';
              this.image_url='static/add2.jpg';
            }
            else
            {
              if(re.data.备注==='token无效') {
                this.token = window.localStorage.setItem("token", "");
                this.$router.push("/login");
              }
              else
                mdui.default.alert(re.data.备注);
            }
          })
          .catch(err=>{
            mdui.default.alert("网络错误");

          });


      }
    },
    mounted() {
      this.token=window.localStorage.getItem("token");
      if(this.token!=null&&this.token.length==64) {
        this.get_sort_list();
        this.inst = new mdui.default.Dialog('#commodity_add_dialog');
      }
    }
  }
</script>
